<template>
  <div>
    <!--logo-->
    <img class="img" src="../assets/logo.png">
    <div class="lunbo">
      <el-carousel indicator-position="outside" height="500px" ref="carousel">
        <el-carousel-item v-for="(item,index) in carouselList" :key="index">
          <img :src="item.pictureUrl" @click="toCarouselList(item.id)"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="login-container">
      <h2>用户登录</h2>
      <div class="login-input">
        <el-form style="width: 300px">
          <el-form-item label="用户名">
            <el-input v-model="account" placeholder="请输入用户名"/>
          </el-form-item>
          <el-form-item label="密码" id="pwd">
            <el-input v-model="password" type="password" placeholder="请输入密码" show-password/>
          </el-form-item>
        </el-form>
      </div>
      <div class="login-btn">
        <el-row class="mb-4">
          <el-button id="login" type="primary" @click="Login()">登录</el-button>
          <el-button type="success" @click="Register()">注册</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
import storeUtil from '../utils/localstorage'

export default {
  name: "Login",
  data() {
    return {
      carouselList: [],
      account: '',
      password: ''
    }
  },

  mounted() {
    this.Lunbo();
  },

  methods: {
    Lunbo() {
      this.$axios.get('/picture/guanggao')
          .then(data => {
            if (data.code === 0) {
              this.carouselList = data.result.picture;
              //alert(data.result.picture);
              if (this.carouselList == null || this.carouselList == '') {
                this.$message({
                  message: '抱歉,轮播图出了点问题,工作人员正在解决',
                  type: 'error'
                })
                return;
              }
              this.$refs.carousel.next();
            }
          }).catch(error => {
        console.log(error);
      })
    },

    Login() {
      if (this.account == '' || this.password == '') {
        this.$message({
          message: '请输入账号和密码',
          type: 'error'
        })
        return;
      }
      let regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
      if (!regPassword.test(this.password)) {
        this.$message({
          message: '请输入长度8-16位,包含字母数字并且前后不能有空格',
          type: 'error'
        })
        return;
      }
      let data = qs.stringify({account: this.account, password: this.password});

      this.$axios.post('/user/login', data)
          .then(data => {
            if (data.code === 0) {
              let uid = data.result.user.id;
              let token = data.result.user.token;
              storeUtil.save('uid', uid);
              storeUtil.save('token', token);
              this.$router.push({path: '/lunbo'});
            } else {
              alert(data.msg);
            }
            //在前端保存以上两个值，用
          }).catch(error => {
        console.log(error);
      })
    },
    Register() {
      this.$router.push("/register");
    }
  }
}
</script>

<style scoped>
.img {
  width: 150px;
  height: 120px;
  border: 1px solid black;
  margin-right: 1450px;
  border-radius: 5px;
}

.lunbo {
  width: 50rem;
  margin-top: 2rem;
  float: left;
}

.login-container {
  position: relative;
  top: 100px;
  width: 400px;
  height: 300px;
  border: gray solid 1px;
  border-radius: 5px;
  margin-right: 120px;
  float: right;
}

h2 {
  margin-top: 30px;
}

.login-input {
  display: flex;
  flex-direction: column;
  padding-left: 50px;
  margin-top: 35px;
}

#pwd {
  padding-top: 10px;
  padding-left: 7px;
}

#login {
  margin-right: 15px;
}

.login-btn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>